<template>
	<view class="body">
		<view class="content">
			<textarea class="textarea_style" value="" v-model="form.contents" placeholder="请填写岗位描述,岗位职责,待遇,公司介绍等" />
			<view style="display: flex;align-items: flex-start;align-items: center;flex-wrap: wrap;">
				<view style="position: relative;" v-for="(item,index) in imgList" :key="index">
					<image class="upload_img" :src="item" mode=""></image>
					<image class="close_icon" @click="deleteImg(index)" src="../../static/img/close.png" mode=""></image>
				</view>
				<view class="publish" @tap="uploadImg">
					<image class="publish_add" src="../../static/img/add.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="select">
				<view class="select_left">
					<view class="select_text">区域</view>
				</view>
				<view class="select_left"> -->
					<!-- <picker @change="bindChangeArea" :value="areaIndex" :range="areaArray" :range-key="'areaName'">
						<view class="select">
							<view class="select_left">
								<view class="select_text">区域</view>
							</view>
							<view class="select_left">
								<view class="uni-input">{{areaArray[areaIndex].areaName}}</view>
								<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
							</view>
						</view>
					</picker> -->
					<!-- <image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view> -->
			<view class="select">
				<view class="select_left">
					<view class="select_text">招聘岗位</view>
				</view>
				<view class="select_left">
					<input v-model="form.post" placeholder="请填写招聘岗位" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="select">
				<view class="select_left">
					<view class="select_text">薪资</view>
				</view>
				<view class="select_left">
					<input v-model="form.salary" type="number" placeholder="请填写薪资(元/月)" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="select">
				<view class="select_left">
					<view class="select_text">招工单位</view>
				</view>
				<view class="select_left">
					<input v-model="form.company" placeholder="请填写招工单位" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="select">
				<view class="select_left">
					<view class="select_text">地址</view>
				</view>
				<view class="select_left">
					<input v-model="form.address" placeholder="请填写地址" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="select">
				<view class="select_left">
					<view class="select_text">联系人</view>
				</view>
				<view class="select_left" style="margin-right: 20rpx;">
					<label class="radio" style="margin-right: 20rpx;"><radio value="r1" @click="isOneSelf = true" :checked="isOneSelf === true" />本人发布</label>
					<label class="radio"><radio value="r2" @click="isOneSelf = false" :checked="isOneSelf === false" />非本人</label>
				</view>
			</view> -->
			<view class="select">
				<view class="select_left">
					<view class="select_text">联系人</view>
				</view>
				<view class="select_left">
					<input v-model="form.customerName" placeholder="请输入姓名" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="select">
				<view class="select_left">
					<view class="select_text">电话号码</view>
				</view>
				<view class="select_left">
					<input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入电话号码" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="select">
				<view class="select_left">
					<view class="select_text">微信号</view>
				</view>
				<view class="select_left">
					<input v-model="form.customerWechat"  placeholder="请输填写微信号" style="text-align: right;font-size: 28rpx;" />
					<image class="to_arrow" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="line_br"></view>
		<view class="bling">	
			<view class="bling_name">岗位亮点</view>
			<view class="bling_tag">
				<view class="bling_tag_inner" v-for="(item,index) in tagList" :class="{selected_color: selectedTag.includes(item.dictLabel)}" :key="index" @tap="selectTag(item.dictLabel)">{{item.dictLabel}}</view>
			</view>
			<view class="bling_select">{{selectedTag.join(",")}}</view>
		</view>
		<view class="submit_btn" @tap="submitHouse">提交</view>
		<!-- 海报 -->
		<view class="posters" v-if="isPoster">
			<view class="posters_layer">
				<view class="canvas-box">
					<canvas class="canvas-inner" canvas-id="mycanvas"/>
				</view>	
				<view class="poster_btn">
					<view @tap="cancelPoster" class="poster_cancel">取消</view>
					<view @tap="saveImg" class="poster_cancel sure_btn1">保存到相册</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script> 
	export default {
		data() {
			return {
				isOneSelf: '',
				tagList: [],
				form:{
					areaCode: '',
					customerName: '', //姓名
					customerWechat: '', //发布者微信
					mobile: '', //电话
					contents: '',//介绍
					img: ''
				},
				areaIndex: 0,
				areaArray: [],
				imgList: [],
				selectedTag: [],
				detailId: '',
				isVerify: false,
				isPoster: false,
				publishId: ''
			}
		},
		onLoad(option) {
			this.getArea()
			this.getSelect("bright_recruit")
			console.log(option)
			this.detailId = option.id
			if(this.detailId){
				this.getDetail()
			}
		},
		methods: {
			cancelPoster(){
				this.isPoster = false
				this.resetForm()
				uni.navigateTo({
					url: '../fangyuan/fangyuan?type=0'
				})
			},
			formSubmit: function(e){
				let that = this
				uni.showLoading({
				    title: '海报生成中...'
				});
				that.isPoster = true
				// 根据发布成功的ID，获取详情
				that.$api.request('/api/recruitmentjob/detail','',{
					id: that.publishId
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					let detailId = res.data.id
					let salary
					if(res.data.salary == "undefined" || res.data.salary == null){
						salary = "面谈"
					}else{
						salary = res.data.salary + "元/月"
					}
					// let salary = res.data.salary ? res.data.salary + "元/月" : "面谈"
					let post = res.data.post
					var context = wx.createCanvasContext('mycanvas');
					var path = '../../static/img/poster_bg.jpg'
					context.drawImage(path,0,0,350,550);
					context.font = "30px bold FangSong";
					context.fillStyle = "#1E3980";
					context.textAlign = "center";
					context.textBaseline = "middle";
					context.fillText("岗位: "+ post, 180, 290);
					context.fillText("薪资: "+ salary, 180, 350);
					let submitId = detailId || "00000000"
					uni.request({
						url: "https://zlzfcloud.xyz/api/weixinCode/getCode",
						method: 'POST',
						responseType: 'arraybuffer',
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
					    },
						data: {
							param: submitId,
							page: 'pages/jobDetail/jobDetail'
						},
						success: (res) => {
							console.log(res)
							let src = wx.arrayBufferToBase64(res.data);
							let src2 = 'data:image/png;base64,' + src
							const fs = wx.getFileSystemManager();
							//随机定义路径名称
							var times = new Date().getTime();
							var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
							console.log("codeimg",codeimg)
							fs.writeFile({
								filePath: codeimg,
								data: src2.slice(22),
								encoding: 'base64',
								success: (rrr) => {
								  console.log("rrr",rrr)
								  context.drawImage(codeimg,130,400,100,100);
								  context.draw();
								  uni.hideLoading()
								},
								fail: (err) =>{
									console.log("err",err)
								}
							});
						},
					})
				})
			},
			saveImg(){
				let that = this
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					height: 550,
					width: 350,
					canvasId: 'mycanvas',
					success: (response) => {
						uni.saveImageToPhotosAlbum({
							filePath: response.tempFilePath,
							success: (response) => {
							 uni.showModal({
							     title: '提示',
							     content: '图片保存成功！',
							     success: function (res) {
							         if (res.confirm) {
							 			that.isPoster = false
							 			that.resetForm()
							 			uni.navigateTo({
							 				url: '../fangyuan/fangyuan?type=0'
							 			})
							         } else if (res.cancel) {
										that.isPoster = false
							 			that.resetForm()
							 			uni.navigateTo({
							 				url: '../fangyuan/fangyuan?type=0'
							 			})
							         }
							     }
							 });
							},
							fail: (response) => {
							 uni.openSetting({
								success: (response) => {
								}
							 })
							}
						})
					},
					fail: (response) => {
						console.log(response);
					}
				}, this); 
			},
			getJump(){
				this.resetForm()
				uni.navigateTo({
					url: '../fangyuan/fangyuan?type=0'
				})
			},
			// 选择亮点
			selectTag(i){
				let that = this
				if(that.selectedTag.includes(i)){
					that.selectedTag = that.selectedTag.filter(function(item) {
						return item != i
					});
				}else{
					that.selectedTag.push(i)
				}
			},
			// 上传图片
			uploadImg(){
				const that = this
				that.$api.uploadImg((res => {
					that.imgList.push(res)
				}))
			},
			// 删除图片
			deleteImg(index){
				this.imgList.splice(index,1)
			},
			//获取区域
			getArea(){
				let that = this
				that.$api.request('/api/area/job/list','',{
					
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.areaArray = res.rows
				})
			},
			//选择区域
			bindChangeArea(e){
				console.log(e)
				this.areaIndex = e.target.value
			},
			switch1Change(e){
				console.log(e)
			},
			//获取选择项
			getSelect(type){
				let that = this;
				that.$api.request('/api/dict/data/list','',{
					dictType: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.tagList = res.rows
				})
			},
			//发布
			submitHouse(){
				let that=this
				// 处理亮点
				let highlights = ''
				let newArr = []
				for (let i = 0; i < that.tagList.length; i++) {
					for (let j = 0; j < that.selectedTag.length; j++) {
						if(that.tagList[i].dictLabel === that.selectedTag[j]){
							newArr.push(that.tagList[i].dictLabel)
						}
					}
				}
				highlights = newArr.join(",")
				if(!that.form.contents){
					uni.showToast({
						title: "请填写岗位描述！",
						icon: "none"
					});
					return false
				}
				if(!that.form.post){
					uni.showToast({
						title: "请填写招聘岗位！",
						icon: "none"
					});
					return false
				}
				if(!that.form.customerName){
					uni.showToast({
						title: "请输入姓名！",
						icon: "none"
					});
					return false
				}
				if(!that.form.mobile){
					uni.showToast({
						title: "请填写手机号码！",
						icon: "none"
					});
					return false
				}
				if(that.detailId){ //编辑
					that.$api.request('/api/recruitmentjob/edit','',{
						id: that.detailId,
						addUserid:  uni.getStorageSync("userId"),
						areaCode: that.areaArray[that.areaIndex].areaName,
						customerName: that.form.customerName, //姓名
						customerWechat: that.form.customerWechat, //发布者微信
						mobile: that.form.mobile, //电话
						post: that.form.post,
						salary: that.form.salary,
						state: 6,
						company: that.form.company,
						address: that.form.address,
						stick: that.form.stick,
						contents: that.form.contents,//介绍
						img: that.imgList.join(","),
						highlights: highlights,
						type: '0' //0招聘,1求职
					}, failres => {
						uni.showToast({
							title: failres.msg,
							icon: "none"
						});
					}).then(res => {
						that.resetForm()
						uni.navigateTo({
							url: '../fangyuan/fangyuan?type=0'
						})
					})
				}else{ //新增
					that.$api.request('/api/recruitmentjob/add','',{
						addUserid:  uni.getStorageSync("userId"),
						areaCode: that.areaArray[that.areaIndex].areaName,
						customerName: that.form.customerName, //姓名
						customerWechat: that.form.customerWechat, //发布者微信
						mobile: that.form.mobile, //电话
						post: that.form.post,
						salary: that.form.salary,
						company: that.form.company,
						address: that.form.address,
						state: 6,
						stick: 1,
						contents: that.form.contents,//介绍
						img: that.imgList.join(","),
						highlights: highlights,
						type: '0' //0招聘,1求职
					}, failres => {
						uni.showToast({
							title: failres.msg,
							icon: "none"
						});
					}).then(res => {
						console.log(res.msg)
						that.publishId = res.msg
						uni.showModal({
						    title: '发布成功！',
						    content: '是否生成海报？',
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
									that.formSubmit()
						        } else if (res.cancel) {
						            console.log('用户点击取消');
									that.resetForm()
									uni.navigateTo({
										url: '../fangyuan/fangyuan?type=0'
									})
						        }
						    }
						});
					})
				}	
			},
			resetForm(){
				this.form = {
					areaCode: '',
					customerName: '', 
					customerWechat: '', 
					mobile: '', 
					contents: '',
					img: ''
				}
				this.imgList = []
				this.index = 0
				this.typeIndex = 0
				this.selectedTag = []
			},
			//获取详情
			getDetail(){
				let that = this;
				that.$api.request('/api/recruitmentjob/detail','',{
					id: that.detailId
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.form = res.data
					if(that.form.salary == 'undefined' || that.form.salary == null || that.form.salary == ''){
						that.form.salary = ''
					}
					if(that.form.img){
						that.imgList = that.form.img.split(",")
					}else{
						that.imgList = []
					}
					that.selectedTag = []
					// 亮点
					if(that.form.highlights){
						let shighlights = that.form.highlights.split(",")
						for(let i=0;i<shighlights.length;i++){
							for(let j=0;j<that.tagList.length;j++){
								if(shighlights[i] == that.tagList[j].dictLabel){
									that.selectedTag.push(that.tagList[j].dictLabel)
								}
							}
						}
					}
					//区域
					that.areaIndex = that.areaArray.findIndex(item =>{
					    return item.areaName == that.form.areaCode
					});
				})
			},
			sureAudit(){
				this.modalName = ''
				uni.switchTab({
					url: '../home/home'
				})
			},
				
		}
	}
</script>

<style lang="scss">
	.posters{
		width: 100vw;
		height: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 999999;
		.posters_layer{
			background: rgba(0,0,0,0.7);
			width: 100%;
			height: 100%;
			padding-top: 20rpx;
			border-radius: 10rpx;
			.canvas-box{
				width:350px;
				height:550px;
				margin: 0 auto;
				.canvas-inner{
					width:100%;
					height:100%;
					z-index: 9999;
					background: #FFFFFF;
					border-radius: 10rpx;
				}
			}
			.poster_btn{
				width: 350px;
				height: 100rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				.poster_cancel{
					width: 270rpx;
					height: 88rpx;
					background: #FFFFFF;
					color: #0EBFDF;
					text-align: center;
					line-height: 88rpx;
					border-radius: 40rpx;
				}
				.sure_btn1{
					background: #0EBFDF;
					border: none;
					color: #FFFFFF;
				}
			}
		}
	}
	.uni-input{
		font-size: 28rpx;
	}
	.close_img{
		width: 30rpx;
		height: 30rpx;
	}
	.diolag{
		position:fixed;
		background-color:rgba(0,0,0,0.5);
		width:100vw;
		height:100vh;
		top:0;
		left:0;
	}
	.diolag_inner{
		width:90%;
		margin:0 auto;
		position:absolute;
		top:15vh;
		left:2.5%;
		background: #ffffff;
		border-radius: 20rpx;
		max-height: 80vh;
		overflow-y: scroll;
		padding: 20rpx;
	}
	.diolag_title{
		width: 90%;
		margin: 0 auto;
		text-align: center;
		color: #333333;
		padding: 20rpx;
		margin-bottom: 10rpx;
	}
	.select_address{
		border: 1rpx solid #007AFF;
		border-radius: 10rpx;
	}
	.address_input{
		width: 100%;
		height: 50rpx;
		background: #ffffff;
		border-radius: 10rpx;
		line-height: 50rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #efefef;
	}
	.input_style{
		outline: none;
		border-bottom: 1px solid #ebebeb;
		margin-top: 20rpx;
		text-align: center;
	}
	.sure_btn{
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #ffffff;
		background: #007AFF;
		text-align: center;
		margin: 50rpx auto 0 auto;
		border-radius: 10rpx;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.body{
		width: 100%;
		background: #F5F5F5;
		min-height: 100vh;
		.content{
			width: 97%;
			margin: 0 auto;
			.textarea_style{
				width: 100%;
				height: 200rpx;
				font-size: 36rpx;
				line-height: 50rpx;
				padding-top: 10rpx;
				color: #000000;
			}
			.upload_img{
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
				margin-bottom: 30rpx;
			}
			.close_icon{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				right: 0;
				top: -15rpx;
			}
			.publish{
				width: 200rpx;
				height: 200rpx;
				background: #EFEFEF;
				position: relative;
				margin-bottom: 30rpx;
				.publish_add{
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					left: 50rpx;
					top: 50rpx;
				}
			}
			.select{
				width: 100%;
				height: 80rpx;
				border-top: 1rpx solid #E6E6E6;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.select_left{
					display: flex;
					align-items: center;
					.select_icon{
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}
				.select_text{
					font-size: 32rpx;
					color: #000000;
					margin-right: 20rpx;
				}
				.to_arrow{
					width: 30rpx;
					height: 30rpx;
				}
			}
			
		}
		.line_br{
			width: 100%;
			height: 20rpx;
			background: #FFFFFF;
		}
		.bling{
			width: 90%;
			margin: 0 auto;
			padding-bottom: 100rpx;
			padding-top: 30rpx;
			.bling_name{
				color: #000000;
				font-size: 32rpx;
			}
			.bling_tag{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.bling_tag_inner{
					background: #E5E5E5;
					color: #828282;
					font-size: 32rpx;
					padding: 5rpx 10rpx;
					margin-right: 30rpx;
					border-radius: 10rpx;
				}
				.selected_color{
					background: #007AFF;
					color: #ffffff;
				}
			}
			.bling_select{
				font-size: 32rpx;
				color: #333333;
				margin-top: 30rpx;
			}
		}
		.submit_btn{
			width: 100%;
			height: 100rpx;
			background: #0091FF;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>
